<template>
  <jc-bar
    :prve-btn="true"
    :search-btn="true"
    @prve="$router.replace({ path: '/home' })"
    :extension-btn="true"
    color="none"
  >
    <v-btn aria-hidden="true" class="text-title" outlined @click="drawer = !drawer">查看目录</v-btn>
    <v-spacer></v-spacer>
    <v-btn>
      <j-icon @click="handleSortList">
        {{ isDescendingOrder ? "倒序" : "正序" }}
      </j-icon>
    </v-btn>
    <template #barextension>
      <v-tabs align-with-title center-active v-model="tab" color="primary">
        <v-tab v-for="(item, index) in nav" :key="index">{{ item.title }}</v-tab>
      </v-tabs>
    </template>
  </jc-bar>

  <STabsWindow v-model="tab">
    <SwiperSlide v-for="(item, index) in nav" :key="index">
      <SgbList v-if="tab === index" :list="item.list" @saveme="saveMe"></SgbList>
    </SwiperSlide>
  </STabsWindow>

  <v-bottom-sheet v-model="savemeVisable">
    <new-ge-dan-prop :id="savemeId" @close="savemeVisable = false"></new-ge-dan-prop>
  </v-bottom-sheet>

  <v-navigation-drawer v-model="drawer" absolute temporary class="bg-transparent">
    <div class="bg-primary w-full h-full">
      <v-divider></v-divider>

      <v-list dense>
        <v-list-item
          @click="
            () => {
              tab = index;
              drawer = false;
            }
          "
          v-for="(item, index) in nav"
          :key="item.id"
          link
        >
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
            <v-list-item-subtitle v-if="tab === index">当前在看</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </div>
  </v-navigation-drawer>
</template>

<script setup name="sgb-index">
import SgbList from "./StarList.vue";
import JcBar from "@/layout/JcBar.vue";
import NewGeDanProp from "@/components/NewGeDanProp.vue";
import { ref, shallowRef, onMounted, shallowReactive, computed } from "vue";
import { useStore } from "vuex";
import STabsWindow from "@/components/STabsWindow.vue";
import { SwiperSlide } from "swiper/vue";
const isDescendingOrder = computed(() => {
  return store.getters["sgb/isDescendingOrder"];
});
const store = useStore();
const tab = ref(0);
const drawer = ref(false);
const nav = shallowRef([]);
const savemeId = ref(null);
const savemeVisable = ref(false);
init();

onMounted(() => {
  console.log("第一次加载");
});

async function init() {
  try {
    const list = await store.dispatch("sgb/getNavJiList");
    const result = await store.dispatch("sgb/getAllLIst");
    nav.value = await Promise.all(
      list
        .filter((item) => item.isUpper == 1)
        .map(async (item) => {
          return {
            title: item.name,
            index: item.id,
            list: shallowReactive(result.filter((citem) => citem.shijiIndex === item.id)),
            page: 1,
            total: 1,
          };
        })
    );
  } catch (error) {
    console.log(error);
  }
}

function saveMe(id) {
  savemeId.value = id;
  savemeVisable.value = true;
}

function handleSortList() {
  store.commit("sgb/setIsDescendingOrder", !isDescendingOrder.value);
  nav.value = nav.value.map((citem) => {
    const list = shallowReactive(citem.list);
    list.sort((a, b) => (!isDescendingOrder.value ? a.xuhao - b.xuhao : b.xuhao - a.xuhao));
    return {
      ...citem,
      list,
    };
  });
}
</script>

<style lang="scss" scoped></style>
